<!DOCTYPE HTML>
<html>

<head>
      <title> 新增卡片</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
      <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
      <div class="container">
            <div class="detail-page span24">
                  <div class="detail-page-title">
                        <h4>新增卡片
                              <a class="page-action pull-right jx-btn" data-type="close" href="javascript:;">返回</a>

                        </h4>
                  </div>
                  <div class="detail-section" style="margin-top:50px">
                        <form id="J_Form" class="jx-form form-horizontal jx-form-thin">
                              <div class="row">
                                    <div class="control-group span16 offset6">
                                          <label class="control-label">排   序：</label>
                                          <div class="controls">
                                                <input type="text" class="control-text" name="sort" data-rules="{required:true,number:true}">
                                          </div>
                                    </div>
                              </div>
                              <div class="row">
                                    <div class="control-group span16 offset6">
                                          <label class="control-label">类目名称：</label>
                                          <div class="controls">
                                                <input type="text" class="input-large control-text" name="name" data-rules="{required:true}">
                                          </div>
                                    </div>
                              </div>
                              <div class="row">
                                    <div class="control-group span16 offset6">
                                          <label class="control-label">URL：</label>
                                          <div class="controls">
                                                <input type="text" class="input-xlarge  control-text" name="price" data-rules="{required:true,number:true}">
                                          </div>
                                    </div>
                              </div>
                              <div class="row">
                                    <div class="control-group span16 offset6  control-row6">
                                          <label for="" class="control-label has-note"> 图片： <div class="label-note"> 图标尺寸:<br>  px*px     </div> </label>
                                          <div class="controls">
                                                <input id="upload-img" type="file" class="hide">
                                                <a href="#" class="btn-upload">
                                                <span>上传图片</span>
                                                <img src="" width="98" height="98">
                                                <input name="b" type="text" data-rules="{required:true}" value="" style="display: none">
                                           </a>
                                          </div>
                                    </div>
                              </div>
                              <div class="row">
                                    <div class="control-group span16 offset6">
                                          <label class="control-label">卡片关键词：</label>
                                    </div>
                              </div>
                              <div class="row" id="keyword">
                                    <div class="control-group span18 offset6">
                                          <label class="control-label"> 关键词1：</label>
                                          <div class="controls span15">
                                                <input type="text" class="control-text" name="key" data-rules="{required:true}">                                                URL：
                                                <input type="text" class=" input-large  control-text" name="url" data-rules="{required:true}">
                                          </div>
                                    </div>
                              </div>

                              <div class="row">
                                    <div class="control-group offset9">
                                          <a id="itemAdd" href="javascript:;" class="jx-btn btn-default btn-large"><i class="icon-plus icon-white"></i> 添加关键字
                                            </a>
                                    </div>
                              </div>
                              <div class="actions-bar">
                                    <div class="row">
                                          <div class="span16 offset10 ">
                                                <button type="submit" class="button button-primary">确定</button>
                                                <button type="reset" class="button">重置</button>
                                          </div>
                                    </div>
                              </div>
                        </form>
                  </div>

            </div>
      </div>
      <!-- script end -->
      </div>
      <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
      <script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
      <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
      <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
      <script type="text/javascript" src="../../../assets/js/admin.js"></script>

      <script type="text/javascript">
            BUI.use('common/page');
      </script>
      <script type="text/javascript">
            BUI.use(['bui/overlay', 'bui/form'], function (Overlay, Form) {
                  var form = new Form.Form({
                        srcNode: '#J_Form'
                  });
                  form.render();
            });
      </script>
      <script>
            $(function () {
                  var serial = 2;
                  $("#itemAdd").click(function () {
                        var itemStr =
                              ' <div class="control-group span16 offset6">' +
                              ' <label class="control-label" id="key' + serial + '"> 关键词' +
                              serial + '：</label>' +
                              ' <div class="controls span11">' +
                              ' <input type="text" class="control-text" name="key"> URL：' +
                              ' <input type="text" class="input-large  control-text" name="url">' +
                              ' <div class="operate-btn-group pull-right">' +
                              '   <a href="javascript:;" class="itemDel jx-btn" style="padding: 2px 5px" type="button"><i class="icon-minus"></i></a>                                                      </div>' +
                              ' </div>' +
                              ' </div>';
                        $("#keyword").append(itemStr);
                        serial++;
                        var length = $("#keyword").find(".control-group").length;
                        console.log(length)
                        if (length >= 8) {
                              $(this).hide()
                        }

                  });
                  $(document).delegate('.itemDel', 'click', function () {
                        $(this).parents(".control-group").remove();
                        var length = $("#keyword").find(".control-group").length;
                        if (length < 8) {
                              $("#itemAdd").show()
                        }
                  })

            })
      </script>

      <body>

</html>